<form action={{ $.Param "redirect-after-submit" }} name="contact" method="POST" netlify-honeypot="bot-field" data-netlify="true" class="contact__form">
  <div class="contact__input--container">
    <div class="hide">
      <label>Don't Fill This in If You Are Human: </label>
      <input type="text" name="bot-field" />
    </div>
    <div class="contact__input--wrapper">
      <label class="contact__label">
        {{ i18n "contact-name" }}
      </label>
      <input type="text" name="name" class="contact__input" aria-label="{{ i18n "contact-name" }}">
    </div>
    <div class="contact__input--wrapper">
      <label class="contact__label">
        {{ i18n "contact-email" }}
      </label>
      <input type="email" name="email" class="contact__input" aria-label="{{ i18n "contact-email" }}">
    </div>
  </div>
  <div class="contact__message--wrapper">
    <label class="contact__label">
      {{ i18n "contact-message" }}
    </label>
    <textarea name="message" class="contact__message" aria-label="{{ i18n "contact-message" }}"></textarea>
  </div>

  {{ if ($.Param "recaptcha") }}
    <div data-netlify-recaptcha="true" class="contact__input--wrapper"></div>
  {{ end }}
  
  <input type="submit" value="{{ i18n "contact-send" }}" class="contact__send">
</form>

<script>
  var formElem = document.querySelector("form");
  formElem.addEventListener("submit", handleSubmit);
  
  var handleSubmit = function(e) {
    e.preventDefault();
    var formData = new FormData(formElem)
    fetch('/', {
      method: 'POST',
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: new URLSearchParams(formData).toString()
    }).then(() => console.log('Form successfully submitted')).catch((error) =>
      alert(error))
  }
</script>